<template>
  <div class="bonus">
    <div class="breadcrumb">财务管理-人才自荐奖金</div>
    <div class="TalentResume">
      <div class="Ltop">
        <div v-for="(item,index) in btnlist"
          :key="index"
          :class="{active:item.isActive}"
          @click="doClick(index)">
          {{item.name}}
          <span v-if="index==0">{{datalist.beConfirmed}}个</span>
          <span v-if="index==1">{{datalist.beIssued}}个</span>
          <span v-if="index==2">{{datalist.haveBeenIssued}}个</span>
        </div>
      </div>
<!--      待发放内容-->
      <div class="Lcontent">
        <div class="op LcontBox">
          <el-table
            align="center"
            :data="tableData1"
            style="width: 100%"
            v-if="isTable==false"
            :cell-style="bankCellStyle" height="100%">
            <el-table-column align="center" min-width="80" prop="name" label="人才姓名"></el-table-column>
            <el-table-column min-width="110"  align="center" prop="phone" label="手机号"></el-table-column>
            <el-table-column min-width="170" align="center" prop="fullName" label="入职企业"></el-table-column>
            <el-table-column min-width="105" align="center" prop="deliveryTime" label="过保时间"></el-table-column>
            <el-table-column min-width="80" align="center" prop="platformName" label="顾问"></el-table-column>
            <el-table-column min-width="120" align="center" prop="bankType" label="银行类型"></el-table-column>
            <el-table-column min-width="180" align="center" prop="bankNum" label="卡号"></el-table-column>
            <el-table-column min-width="90" align="center" prop="bonus" label="自荐金"></el-table-column>
            <el-table-column label="处理" align="center" min-width="80">
              <template slot-scope="scope">
                <div
                  style="color: #3377ff"
                  size="medium"
                  @click="doPopup(scope.row.deliveryId, scope.row,scope.$index)"
                >{{msg}}</div>
              </template>
            </el-table-column>
          </el-table>
          <!--已发放内容-->
          <div class="ltable" v-if="isTable==true">
            <el-table :data="tableData" height="100%" style="width: 100%" :cell-style="bankCellStyle">
                <el-table-column align="center" min-width="80" prop="name" label="人才姓名"></el-table-column>
                <el-table-column min-width="110"  align="center" prop="phone" label="手机号"></el-table-column>
                  <el-table-column align="center" min-width="120" prop="licenseType" label="执业类型(人才)">
                    <template slot-scope="scope">
                      <el-popover
                              placement="bottom-end"
                              width="200"
                              trigger="hover">
                        <div v-html="scope.row.licenseType" style="text-align: center"></div>
                        <div slot="reference" v-html="scope.row.short"></div>
                      </el-popover>
                    </template>
                  </el-table-column>
                  <el-table-column align="center"  min-width="220" prop="fullName" label="入职企业"></el-table-column>
                  <el-table-column align="center" min-width="95" prop="deliveryTime" label="过保时间"></el-table-column>
                  <el-table-column align="center"  min-width="100" prop="bankType" label="银行类型"></el-table-column>
                  <el-table-column  align="center" min-width="145"prop="bankNum" label="卡号"></el-table-column>
                  <el-table-column align="center" min-width="80" prop="bonus" label="奖金金额"></el-table-column>
                  <el-table-column align="center" min-width="100" prop="paymentTime" label="发放时间"></el-table-column>
                  <el-table-column align="center" prop="platformName" label="联系顾问"></el-table-column>
            </el-table>
          </div>
        </div>
      </div>
      <el-pagination
              style="text-align: right;margin-right: 40px"
              background
              @current-change="pageChange"
              :current-page.sync="query.currPageNo"
              :page-size="query.pageSize"
              layout="total,prev, pager, next"
              :total="query.total"
      ></el-pagination>
    </div>

    <!--弹窗-->
    <div class="lPopup" v-show="islabel==true">
      <div class="lPopup_box">
        <div class="box_header">
          <i class="bleft"></i>
          <span>{{opType==0?'确认已发放':'确认银行卡信息'}}</span>
          <i @click="closedialog" class="el-icon-close fl"></i>
        </div>
        <div class="box_body">
          <div v-if="opType==1" class="really">确认该人才自荐奖金已发放？</div>
          <p v-if="opType==0">
            姓名：
            <span>{{tableData1[drIndex]?tableData1[drIndex].name:''}}</span>
          </p>
          <p v-if="opType==0">
            开户行：
            <span>{{tableData1[drIndex]?tableData1[drIndex].bankType:''}}</span>
          </p>
          <p v-if="opType==0">
            银行卡号：
            <span>{{tableData1[drIndex]?tableData1[drIndex].bankNum:''}}</span>
          </p>
          <p v-if="opType==0">确认后状态不可修改</p>
          <div class="lzhifu">
            <div v-for="(item,index) in pws" :key="index">
              <input
                type="text"
                v-model="pws[index]"
                v-focus="index==aindex?true:false"
                :data-id="index"
                @input="inputPwd"
                maxlength="1">
            </div>
          </div>
          <p class="tal">请输入6位确认密码</p>
          <div class="lbtn">
            <button class="close" @click="doBartender1">取消</button>
            <button class="affirm" @click="doBartender">确认</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'bonus',
  data() {
    return {
      opType: 0,
      msg: '',
      defaultImg: require('@/assets/logo.png'),
      islabel: false,
      isTable: false,
      tableData1: [],
      btnlist: [
        { name: '待确认', isActive: true },
        { name: '待发放', isActive: false },
        { name: '已发放', isActive: false }
      ],
      tableData: [],
      drId: '',
      drIndex: 0,
      inputPsd: '',
      pws: ['', '', '', '', '', ''],
      aindex: 0,
      datalist: [],
      query: {
        currPageNo: 1,
        pageSize: 30,
        total:0
      }
    }
  },
  directives: {
    focus(el, binding, vnode) {
      // console.log(binding)
      if (binding.value) {
        el.focus()
      } else {
        el.blur()
      }
      el.onfocus = function() {}
      el.onblur = function() {}
    }
  },
  mounted() {
    document.onkeydown = function(e) {
      if (e.code == 'Backspace') {
        this.clearPwd()
      }
    }.bind(this)
  },
  methods: {
    cellClick(row, column, cell, event) {0
      console.log('==========', row)
    },
    clearPwd() {
      setTimeout(() => {
        if (this.aindex <= 0) {
          this.aindex = 0
        } else {
          this.aindex = this.aindex - 1
        }
      }, 350)
    },
    bankCellStyle(row, column, rowIndex, columnIndex) {
      if (row.column.label === '卡号'||row.column.label === '银行类型'||row.column.label === '自荐金'||row.column.label === '奖金金额') {
        return 'color:red'
      }
    },
    inputPwd(e) {
      if (e.data != null) {
        if (parseInt(e.target.dataset.id) + 1 >= this.pws.length) {
          this.aindex = parseInt(e.target.dataset.id)
        } else {
          this.aindex = parseInt(e.target.dataset.id) + 1
        }
      }
    },
    closedialog() {
      this.islabel = false
    },
    pageChange() {
        this.getTalentBonus();
    },
    getTalentBonus(){
      let seft = this;
      let obj = this.opType;
      this.lAxios({
        method: 'post', //方法
        url: '/platform/getTalentBonusPaymentNum.do', //路径，基础路径在main.js里面配置
        params: {
          //传参
          state: obj,
          currPageNo: seft.currPageNo,
          pageSize: seft.pageSize
        }
      }).then(res => {
        //成功的回调函数
        console.log("user",res.data.data);
        this.datalist = res.data.data
        if (res.data.status == 0) {
          //待确认,带发放状态
          if (obj != 2) {
            this.tableData1 = res.data.data.talentBonusPayment.list
            for(var i=0;i<this.tableData1.length;i++){
              if(this.tableData1[i].bonus!=null){
                this.tableData1[i].bonus = this.tableData1[i].bonus + "k"
              }
            }
            this.query.total = res.data.data.talentBonusPayment.total;
          } else {
            this.tableData = res.data.data.talentBonusPayment.list;
            for(var i=0;i<this.tableData.length;i++){
              if(this.tableData[i].bonus!=null){
                this.tableData[i].bonus = this.tableData[i].bonus + "k"
              }
              if(this.tableData[i].licenseType.indexOf(',')!=-1){
                this.tableData[i].short = this.tableData[i].licenseType.split(',')[0]+"..";
              }else{
                this.tableData[i].short = this.tableData[i].licenseType;
              }
              this.tableData[i].licenseType = _g.getdotAreaTo(this.tableData[i].licenseType);
            }
            this.query.total = res.data.data.talentBonusPayment.total;
          }
        }
      })
    },
    doClick(obj) {
      console.log('index', obj)
      this.btnlist.forEach(item => {
        console.log('item', item)
        item.isActive = false
      })
      this.btnlist[obj].isActive = true
      this.opType = obj
      if (obj == 1) {
        this.msg = '待发放'
        this.isTable = false
      } else if (obj == 2) {
        this.msg = '已发放'
        this.isTable = true
      } else {
        this.msg = '确定'
        this.isTable = false
      }
      this.getTalentBonus();
    },
    doPopup(index, row, i) {
      console.log('index', index)
      console.log('row', row)
      console.log('i', i)
      this.pws=['', '', '', '', '', ''];
      //设置obj获取的id等于我需要的简历ID
      this.drIndex = i;
      this.drId = index
      console.log(this.msg)
      this.islabel = true
    },
    doBartender() {
      this.inputPsd = this.$b.inputPwdMerge(this.pws)
      this.lAxios({
        method: 'post', //方法
        url: '/platform/confirmPaymentTalent.do', //路径，基础路径在main.js里面配置
        params: {
          //传参
          // inputPsd:this.inputPsd,
          inputPsd: this.inputPsd,
          deliveryRecordId: this.drId
        }
      }).then(res => {
          console.log(res)
          if (res.data.status == 0) {
            this.islabel = false
            if (this.msg == '确定') {
              this.doClick(0)
            } else if (this.msg == '待发放') {
              this.doClick(1)
            }
          } else {
            //如果失败,输入密码窗口不消失
            this.islabel = true
            //失败了弹窗
          }
        })
        .catch(err => {
          //失败的回调函数
          console.log(err)
        })
    },
    doBartender1() {
      //取消密码窗口
      this.islabel = false
    }
  },
  activated() {
    this.doClick(0)
  }
}
</script>
<style lang="scss" scoped>
.bonus {
  box-sizing: border-box;
  width: 100%;
  padding-left: 10px;
}
.breadcrumb {
  margin: 10px 0;
  font-size: 14px;
  color: #333;
}
.TalentResume {
  box-sizing: border-box;
  width: 100%;
  min-width: 1000px;
}
.Ltop {
  margin-top: 10px;
  margin-bottom: 20px;
  padding: 15px 50px;
  height: 50px;
  background-color: #fff;
  display: flex;
  flex-direction: row;
  cursor: default;
  .active {
    background-color: #37f;
    border: none;
    color: #fff;
  }
}
.Ltop > div {
  margin-right: 20px;
  width: 160px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  box-sizing: border-box;
  border: 1px solid rgb(211, 219, 255);
  border-radius: 5px;
  font-size: 16px;
  margin-right: 10px;
}
.Lcontent {
  padding: 50px 40px 0px 40px;
  background-color: #fff;
  font-size: 16px;
  display: flex;
  flex-direction: column;
}
.op{
  width: 100%;
  height:calc(100vh - 325px);
  overflow: auto;
}
.LcontBox {
  background-color: #f7f9fc;
  display: flex;
  flex-direction: row;
}
.lleft {
  width: 85%;
  height: 120px;
  display: flex;
  flex-direction: row;
}

.lright {
  width: 15%;
  height: 120px;
  .btn {
    width: 80%;
    margin: 30px auto;
    height: 60px;
    text-align: center;
    line-height: 60px;
    background-color: #fff;
    border-radius: 5px;
    border: 1px solid rgb(51, 119, 255);
    color: #3377ff;
  }
}
.firstDiv {
  width: 20%;
  text-align: center;
  line-height: 60px;
  .fwb {
    font-size: 20px;
  }
}
.secDiv {
  border: 2px solid red;
  width: 80%;
  display: flex;
  flex-direction: column;
  // font-size: 12px;
  .half {
    display: flex;
    flex-direction: row;
    div {
      flex: 1;
      padding: 0 10px;
      // text-align: center;
      line-height: 40px;
    }
    .tac {
      text-align: center;
    }
  }
}
.lbuttom {
  color: #f00;
  background-color: rgba(51, 119, 255, 0.08);
}
/*---------------------弹窗----------------------------*/
.lPopup {
  width: 100%;
  height: 100%;
  z-index: 99;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
}
.lPopup_box {
  width: 400px;
  background-color: white;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  .box_header {
    height: 40px;
    background-color: #f7f9fc;
    padding: 0 15px;
    display: flex;
    align-items: center;
    .bleft {
      flex: 0.3;
      width: 3px;
      height: 16px;
      background-color: #3377ff;
      box-sizing: border-box;
      border: rgb(211, 219, 255) 1px solid;
      margin: 12px 10px;
    }
    span {
      font-size: 16px;
      font-weight: 700;
      color: #333;
      flex: 100;
    }
    i {
      flex: 5;
    }
  }
}
.box_body {
  padding: 25px 55px;
  text-align: center;
  .really {
    margin: 20px 0;
    font-size: 16px;
    color: #1f2e4d;
  }
  p {
    font-size: 14px;
    color: #f00;
  }
  .tal {
    text-align: left;
    margin-bottom: 60px;
  }
}
.lbtn {
  display: flex;
  justify-content: space-between;
  button {
    width: 140px;
    height: 40px;
    border: 1px solid rgb(230, 233, 240);
    background-color: rgb(247, 249, 252);
    border-radius: 5px;
    // margin-bottom: 10px;
  }
  .affirm {
    background-color: #3377ff;
    color: #fff;
  }
}
.lzhifu {
  // width: 300px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin: 30px auto 5px;
  input {
    width: 30px;
    height: 30px;
    text-align: center;
    border: 1px solid rgb(230, 233, 240);
    border-radius: 3px;
  }
}
.box2_body {
  padding: 25px 55px;
  p {
    font-size: 16px;
    margin-bottom: 15px;
  }
  .tal {
    font-size: 14px;
    color: #f00;
    margin-bottom: 40px;
  }
}
.ltable {
  width: 100%;
  margin-left: 1%;
}
</style>
